<template>
  <div>
    <div class="text-center text-blue-400">
      <div class="system__icon text-[12px] animate-none" @click="displayMore = !displayMore">
        <span>
          {{ t('更多') }}
          <DoubleLeftOutlined :rotate="!displayMore ? -90 : 90" />
        </span>
      </div>
    </div>
    <a-divider class="mt-2 mb-6"></a-divider>
    <div v-if="displayMore">
      <a-form-item :label="t('操作')">
        <Operations></Operations>
      </a-form-item>
      <div v-admin>
        <a-form-item label="管理员">
          <div class="flex gap-4">
            <Upgrade />
            <a-button @click="upload">{{ t('上传固件') }}</a-button>
          </div>
        </a-form-item>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { uploadTemplate } from '@/api/modules/utils/files';
import Operations from './operations.vue';
import { DoubleLeftOutlined } from '@ant-design/icons-vue';
import Upgrade from './upgrade.vue';

const displayMore = ref(false);

const { t } = useI18n();
const upload = () => {
  uploadTemplate({ link: '/firmware/firmware/upload', fileType: 'bin' });
};
</script>

<style lang="scss" scoped>
.animate-none {
  * {
    animation: none !important;
  }
}
</style>
